Figma Dev Mode llegó a disponibilidad general en 2023 y durante 2024 ha ido madurando hasta convertirse en la vista por defecto cuando un developer abre un archivo de Figma. La idea es sencilla pero potente: separar la experiencia de quien diseña de la de quien implementa. En vez de obligar al developer a navegar paneles pensados para ilustradores, Dev Mode ofrece una lectura distinta del mismo archivo: medidas exactas, CSS generado, variables mapeadas a tokens y un puente directo hacia el código. La tesis detrás del producto es que la fricción histórica entre diseño y desarrollo no es cultural, es de herramienta.
Qué cambia respecto al modo editor
Al entrar en Dev Mode la barra lateral izquierda pasa a mostrar una lista jerárquica de componentes marcados como listos para implementar. La derecha se reorganiza en tres secciones: inspección (dimensiones, color, tipografía), exportación (assets en SVG, PNG, PDF con distintas densidades) y, si el equipo ha configurado Code Connect, un panel con el snippet real del componente en el framework de destino. Las anotaciones del diseñador aparecen como chinchetas sobre el lienzo, igual que los comentarios pero sin contaminar la conversación.
El ciclo de estados es otro detalle que suena menor y acaba pesando: un componente puede estar en “Ready for dev”, “In progress” o “Done”. Esos estados son consultables por API y varios equipos los enganchan a Jira o Linear para que las tarjetas reflejen el estado real del diseño sin pedirle a nadie que mantenga dos tableros.
Inspección y copia de estilos
Seleccionar un elemento muestra sus propiedades computadas. No hay que recordar atajos: el código se copia con un clic, y Figma detecta si has definido variables en el archivo para soltar referencias var(--color-primary) en lugar de hexadecimales crudos. Para proyectos que usan Tailwind o styled-components existen plugins que reescriben esa salida al dialecto correspondiente, con resultados razonables siempre que el diseño respete la escala del sistema.
Un pequeño ejemplo del CSS que genera para un botón primario estándar:
.button-primary {
width: 120px;
height: 40px;
background: var(--color-primary);
border-radius: 8px;
padding: 8px 16px;
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 500;
}Este bloque es representativo, no idiomático. Ningún developer escribiría width: 120px en un botón real; se usaría min-width o se dejaría fluir. Dev Mode es buena fuente de verdad sobre intención, no una plantilla lista para pegar sin mirar.
Variables, tokens y Code Connect
La integración más interesante es Code Connect. El archivo de Figma contiene un componente Button con variantes “Primary”, “Secondary”, “Ghost”; el repositorio tiene un Button.tsx con props equivalentes. Code Connect permite declarar esa correspondencia en un fichero de configuración del repo y, a partir de ahí, el panel de Dev Mode deja de mostrar CSS genérico y muestra la invocación real: <Button variant="primary">Click</Button>. El diseñador sigue trabajando en Figma como siempre; el developer deja de traducir píxeles y empieza a copiar instancias.
Las variables de Figma (color, número, string, booleano) se exportan por API como JSON y se pueden canalizar hacia Style Dictionary para generar CSS, Sass, tokens nativos de iOS o Android. Con eso se cierra el círculo: un cambio en la paleta de Figma se convierte, vía pipeline, en un commit al repositorio de tokens, y de ahí a todas las plataformas. La sincronización no es automática por defecto; hay que montarla, pero el camino está bien trillado.
Handoff realista
La mejora medible del handoff es real pero modesta. En equipos donde antes se hablaba de “pixel peeping” y capturas de pantalla anotadas en Slack, Dev Mode reduce el ida y vuelta en algo así como un 30-40% medido en consultas a diseño por feature. No desaparece: los developers siguen preguntando por estados vacíos, comportamiento responsive, animaciones y casos límite que el archivo estático no captura. Lo que cambia es qué preguntas llegan. Dejan de ser “¿cuánto padding?” y pasan a ser “¿qué pasa si la lista está vacía?”. Esa es la conversación que interesa.
El flujo típico en un equipo maduro: el diseñador marca componentes como listos, el developer abre Dev Mode junto al editor, la extensión de VS Code enseña el archivo al lado del código y Code Connect devuelve snippets alineados con la librería interna. Los plugins de GitHub y Storybook enlazan pull requests e historias a los frames correspondientes, cerrando el bucle en la otra dirección: al revisar una PR se puede saltar al diseño original en dos clics.
Dónde Dev Mode se queda corto
El producto asume que el archivo de Figma está bien estructurado. Si los layers se llaman Rectangle 47, si los colores están hardcoded en cada capa y si no hay componentes reutilizados, Dev Mode expone ese caos tal cual. No limpia nada. Equipos sin sistema de diseño obtienen de Dev Mode lo mismo que obtendrían del modo editor clásico: medidas, y poco más. El retorno de la inversión aparece cuando existen componentes consistentes, tokens bien nombrados y una nomenclatura compartida entre Figma y el repositorio.
La segunda limitación es el precio. Dev Mode está incluido en los planes Professional, Organization y Enterprise, no en el plan gratuito. Para equipos de dos o tres personas el coste por asiento puede no compensar, sobre todo si el diseño lo hace ocasionalmente quien programa. El punto en el que suele tener sentido pagar está alrededor del quinto developer o cuando aparece un segundo producto que comparte sistema.
La tercera es menos obvia: el CSS generado no es idiomático. Funciona como referencia de intención, pero copiarlo sin revisión produce componentes rígidos, llenos de dimensiones fijas y sin respuesta al contenedor. Dev Mode es un punto de partida, no un generador de código listo para producción. Asumir lo contrario ha llevado a más de un equipo a arrastrar deuda visual durante meses.
Conclusión
Figma Dev Mode es hoy la herramienta por defecto para salvar la distancia entre diseño e implementación en frontend, y lo es por razones sólidas: inspección precisa, variables que sobreviven al viaje al código, Code Connect como atajo hacia componentes reales y un ecosistema de plugins que cubre los puntos ciegos habituales. Las integraciones con IA que empiezan a aparecer en 2024 apuntan a un futuro donde el handoff sea aún menos manual, aunque por ahora el diseñador sigue siendo quien decide y el developer sigue siendo quien juzga la traducción. Donde Dev Mode realmente rinde es en equipos que ya tenían un sistema de diseño vivo; donde no lo hay, la herramienta ilumina el problema en vez de resolverlo. Entendido así, como amplificador de buenas prácticas y no como sustituto de ellas, merece el sitio que ha ganado en el stack de casi cualquier equipo que se tome el frontend en serio.
